<template>
  <div class="box">
    <div class="login-container">
      <el-form status-icon ref="ruleFormRef" :model="data" label-width="40px" class="loginform">
        <div class="login">
          <h2>登录</h2>
        </div>
        <el-form-item prop="admin_name" :rules="[
            { required: true, message: '请输入账号' },
            { type: 'string', message: '请输入账号' },
          ]">
          <el-input v-model="data.admin_name" autocomplete="off" placeholder="" class="inpu1" />
        </el-form-item>
        <el-form-item prop="pwd" :rules="[
            { required: true, message: '请输入密码' },
            { type: 'string', message: '请输入密码' },
          ]">
          <el-input v-model="data.pwd" type="password" autocomplete="off" class="inpu1" />
        </el-form-item>
        <el-form-item>
          <el-button class="botto" type="primary" @click="debounce(login,300)">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>0
import { reactive } from "vue";
import { ElMessage } from "element-plus";

import { loginList } from "../../api/index"; //接口

import router from "../../router/router"; //路由


// 防抖
let timer:any | null = null
let debounce = (fn:Function, delay: number) => {
  // console.log(timer);
  if(timer) clearTimeout(timer)
    timer = setTimeout(()=>{
      fn()
    },delay)
}

let data = reactive({
  // 接口数据
  admin_name: "admin",
  pwd: "123456",
})
let login = async () => {
  let res:any = await loginList(data)
  console.log(res);
  if(res.code ==="00000"){
    localStorage.setItem('token', res.token)
    localStorage.setItem("userInfo", JSON.stringify(res.admin));

    ElMessage({
      message: "登录成功",
      type: "success",
    })

    router.push("./listView"); //跳转页面

  }else{
    ElMessage({
      message: res.msg,
      type: "error",
    })
  }
}

</script>

<style scoped lang="less">
.box {
  height: 100%;
}

.login-container {
  min-height: 100%;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url("http://visit.lening365.com/static/img/20220418203517.73d99f43.jpg");
  background-size: cover;
  background-position: 50%;
}

.loginform {
  position: relative;
  /* width: 350px; */
  width: 520px;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 180px;
  /* background-color: aqua; */
}

.title {
  position: relative;
  margin: 0 auto;
}

.login {
  margin-bottom: 30px;
  color: #fff;
  text-align: center;
}

.el-form-item__content {
  margin: 0;
}

.inpu1 {
  border-radius: 10px !important;
  width: 448px;
  height: 50px;
  background: transparent;
}

/deep/.el-input__wrapper {
  border-radius: 10px !important;

  background-color: rgb(40, 52, 67) !important;
  padding-left: 50px;
  border: 0 !important;
}

/deep/.el-input__inner {
  border: 0 !important;
  color: #fff !important;
}

.botto {
  width: 450px;
  height: 36px;
  line-height: 50px;
  background-color: #1890ff;
  border: #1890ff;
}
</style>